<template>
  <div id='tmpl'>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item,index) in list" :key="index">
            <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    {{item.title}}
                    <p class='mui-ellipsis' v-text="item.zhaiyao">
                        <div class="ft">
                            <span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD hh:mm:ss")}}</span>
                            <span>{{item.click}}</span>
                        </div>
                    </p>
                </div>
            </router-link>
		</li>
    </ul>
  </div>
</template>
<script>
import {Toast} from "mint-ui"
export default {
  name: "component_name",
  data () {
    return {
        list:[]
    };
  },
  created(){
      this.getlist();
  },
  methods:{
      getlist(){
          var url="/api/getnewslist";
          /* this.$http.get(url).then(res=>{ //用vue-router是url要求全称如www.xxx/api/getnewslist
              console.log(res);
              var data=res.body;
              if(data.status!=0){
                  Toast(data.message);
                  return
              }
              this.list=data.message;
          }) */
          this.$axios.get(url).then(res=>{
              var data=res.data;
              if(data.status!=0){
                  Toast(data.message);
                  return
              }
              this.list=data.message;
          })
      }
  }
}
</script>
<style lang="less" scoped>
.mui-table-view-cell .mui-media img{
    width: 80px;
    height: 80px;
}
.mui-table-view .mui-media-object{
    max-width: 80px;
    line-height: 80px;
    height: 80px;
}
.ft{
    margin-top: 1.5em;
    font-size: 14px;
    color: blue;
    span:last-of-type{
        margin-left: 20px;
    }
}
</style>